<template>
  <view>
    <!-- 公告列表组件 -->
    <view class="main" name="AnnouncementItem">
      <navigator class="item" url="/subpkg/notice_detail/notice_detail" v-if="isShow">
        <view class="text">
          在营车辆年检通知，为保障车辆能够
        </view>
        <view class="time">
          05-06 06:16
        </view>
      </navigator>
      <!-- 无任何消息 -->
      <view class="noMessage" v-else>
        <image src="../../static/tab_icons/不存在.png" mode=""></image>
        <view class="text">暂无消息</view>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    name: 'AnnounCementItem',
    components: {},
    data() {
      return {
      isShow:true
      };
    },
    created() {},
    mounted() {},
    onLoad() {},
    methods: {

    }
  }
</script>

<style lang="scss">
  .main {
    background-color: #F4F4F4;
    .item {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px 8px;
      height: 59px;
      border-bottom: 1px solid #ccc;
      line-height: 59px;
      background-color: #fff;

      .text {
        font-size: 14px;
        margin-left: 15px;
        color: #2A2929;

        &::before {
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #c00000;
          display: block;
          position: absolute;
          // z-index: 100;
          top: 50%;
          margin-left: -15px;
        }
      }

      .time {
        color: #818181;
        font-size: 12px;
      }
    }
 // 暂无消息
 .noMessage {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   image{
   width: 200px;
   height: 120px;
   }
   .text {
     color: #818181;
     font-size: 14px;
   }
 }

  }
</style>